'use client';

import { queryOauthClientApis } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type { IOauthClientApi } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';
import DetailsOauthClientApiInfo from '@/app/[locale]/admin/oauth/client/api/detail/info';
import { useContext } from 'react';
import { OauthClientApiAdminContext } from '@/contexts/admin/oauth/clientApi';

export default function DetailsOauthClientApiAdminPage() {
  const context = useContext(OauthClientApiAdminContext);

  const queryOauthClientApisByIdQuery = useQuery(
    ['/oauth', '/clients', '/apis'],
    async () => {
      return (await queryOauthClientApis()) as IOauthClientApi[];
    },
  );

  if (queryOauthClientApisByIdQuery.data) {
    const data = queryOauthClientApisByIdQuery.data.find(
      (item) => item.id === context.detailItem?.id,
    );

    if (!data) {
      return <Alert type="error" message="开放认证客户端接口不存在" />;
    }

    return (
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            <DetailsOauthClientApiInfo details={data} />

            <div></div>
          </div>
        </div>
      </div>
    );
  }

  if (queryOauthClientApisByIdQuery.error) {
    return <Alert type="error" message={queryOauthClientApisByIdQuery.error} />;
  }

  return <AlertLoad />;
}
